<template>
	<view class="bg-white" style="width: 100%;height: 100%;">
		<cu-custom v-if="showHeader" bgColor="bg-gradual-red-yellow" :isBack="true" :isHome="true" backText="返回" :title="title"></cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback" >
			<view class="introduce-section">
				<text class="title">{{ info.title }}</text>
				<view class="introduce">
					<view class="text-cut" style="max-width: 380rpx;padding-right: 16rpx;" >{{info.publisher?info.publisher:'详情'}}</view>
					<view>{{showCount}}阅读</view>
					<view>{{ info.publishTimeText }}</view>
				</view>
				<view v-if="showContent" style="padding-top: 20rpx;" >
					<u-parse  :html="content" :lazy-load="true" ></u-parse>
				</view>
				<image v-if="imgage&&url" :src="url" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				<video v-if="video&&url"
					class="video"
					:src="url"
					controls
					objectFit="fill"
					:autoplay="false"
				></video>
				<view v-if="showGotoFile" class="text-center text-gray">
					<text @tap="gotoFile">点此可查看原文件</text>
				</view>
				<view style="padding-top: 30rpx;display: flex;justify-content:space-between;align-items:center;">
					<view class="text-left text-gray" >
						<text class="cuIcon-appreciate text-gray" style="padding-right: 10rpx;"></text> {{likeCount?likeCount:0}}
						<text class="cuIcon-favor text-gray" style="padding: 0 10rpx 0 20rpx;"></text> {{collectCount?collectCount:0}}
					</view>
					<view class="text-right text-gray" >
						<text @tap="gotoReport" style="font-size: 24rpx;">我要举报</text>
					</view>
					
				</view>
				
				<view class="comment">
					<view class="title">
						<text>全部评论</text>
						<text class="count" v-if="info.commentCount&&info.commentCount > 0">({{ info.commentCount }})</text>
					</view>
					<view v-if="showComment" style="padding-bottom: 110rpx;">
					<comment-item   v-for="(item,index) in commentList" :key="index" :info="item" @reply="reply($event)" ></comment-item>
					</view>
				</view>
			</view>		
		</mescroll-body>
		<view  class="cu-bar foot-zh input" style="height: 110rpx;padding-right:0rpx">
			<view class="round" style="width: 380rpx;height: 70rpx;margin-left: 30rpx;background-color: #f2f2f2;color: #999999;display: flex;align-items: center;" @tap="comment"><text style="margin-left: 38rpx;">发表评论</text></view>
			<view class="action">
				<text  class="cuIcon-comment text-gray" @click="gotoComment"> </text>
				<text :class="likeFlag?'text-red cuIcon-appreciatefill':'text-gray cuIcon-appreciate'" @click="articleLike"></text>
				<text :class="collectFlag?'text-red cuIcon-favorfill':'text-gray cuIcon-favor'" @click="articleCollect" ></text>
				<button open-type="share" class="cu-btn bg-white" style="width: 60rpx;padding-left: 40rpx;"  hover-class='none' @tap="share"><text class="cuIcon-share text-gray" style="font-size: 42rpx;"></text></button>
			</view>
		</view>
		<!-- 分享示例 -->
		<uni-popup  ref="h5Share" type="share" @change="shareChange" @close="shareClose">
			<uni-popup-share title="分享到" @select="shareSelect"></uni-popup-share>
		</uni-popup>
		
		<uni-popup  ref="addComment" @close="closeComment" type="bottom">
			<view class="add-comment">
				<view class="info">
					<view class="input">
						<textarea
							:cursor-spacing="20"
							:show-confirm-bar="false"
							:auto-height="true"
							:fixed="true"
							:maxlength="200"
							:focus="addCommentFocus"
							v-model.trim="commentContent"
							placeholder-class="input-placeholder-class"
							:placeholder="replyFlag? '回复 ' + parentNikeName + '：' : '发表评论'"
						/>
					</view>
					<view class="add">
						<button class="cu-btn bg-gradual-red-yellow round" @click="addCommentOrReply()" style="width: 150rpx;">{{ replyCommentId > 0 ? '回复' : '发表' }}</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import api from '@/api/system/article.js';
	import store from '@/store';
	import commentItem from './comment-item.vue';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
	import util from '@/common/util/util.js';
	import wechatMP from '@/common/sdk/wechatMP.js';
	export default {
		mixins: [MescrollMixin],
		components: {
			commentItem,
			MescrollEmpty,
		},
		data() {
			return {
				title:'文章详情',
				accessToken: store.state.hh_token,
				imgage:false,
				video:false,
				showCount:0,
				showContent:false,
				showHeader:true,
				showGotoFile:false,
				contentType:'richText',
				content:``,
				url:'',
				articleId:null,
				info:{},
				downOption: {
					use:true,
					auto: true //是否在初始化后,自动执行downCallback; 默认true
				},
				likeFlag:false,//点赞
				collectFlag:false,//收藏
				commentList:[],
				showShareTip: false,
				showBrowserShareTip: false,
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						use : true ,
						icon : null , 
						tip: '暂无评论，快来抢占沙发吧~'
					}
				},
				likeCount:0,
				collectCount:0,
				addCommentFocus: false,
				commentContent:'',
				replyFlag:false,
				parentNikeName:'匿名',
				parentCommentId:null,
				replyId:null,
				showComment:false
			}
		},
		onShow() {
			this.downCallback()
		},
		onLoad: function (option) {
			if (this.$Route.query){
				this.articleId=this.$Route.query.articleId;
				const data = {}
				data.articleId = this.articleId
				// 获取详情请求
				this.$http.post(api.getArticleDetail, data).then(res => {
					this.info = res.result
					this.title =this.info.title
					let showCount= this.info.showCount?this.info.showCount:0
					this.showCount = showCount
					this.likeCount = this.info.likeCount?this.info.likeCount:0
					this.collectCount= this.info.collectCount?this.info.collectCount:0
					this.content = res.result.articleContent
					if(this.content){
						this.showContent=true
					}
					this.likeFlag = res.result.likeFlag
					this.collectFlag = res.result.collectFlag
					if(this.info.contentType){
						this.contentType =this.info.contentType
						if(this.contentType == 'richText'){
								
						}else if(this.contentType == 'file'){
							this.url = this.info.fileUrl
							if(this.info.fileType=='pdf'){
								this.showGotoFile = true
							} else if(this.info.fileType=='imgage'){
								this.imgage = true
							}else if(this.info.fileType=='video'){
								this.video = true
							}
						}
					}
					this.initMPShare(); //公众号分享
				}).catch(error => {
				})
				
				//记录阅读
				setTimeout(() => {
					this.$http.post(api.articleRead, data).then(res => {
						this.showCount = showCount+1
					}).catch(error => {
						
					})
				}, 100 )
			}
			
		},
		/*小程序分享*/
		onShareAppMessage() {
			return {
				path: 'pages/system/article/articleDetail?articleId=' + this.articleId,
				success: function(e) {},
				title: this.title,
				imageUrl: this.info.imgUrl?this.info.imgUrl:this.info.imgBigUrl
			};
		},
		methods: {
			gotoFile(){
				this.$Router.push({ name:'articleFile', params:this.info})
			},
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.showComment = false
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				const data={}
				data.pageNum=page.num
				data.pageSize=page.size
				this.getCommentList(data)
			},
			getCommentList(data){
				data.articleId=this.articleId
				data.replyFlag='0'
				this.$http.post(api.getCommentList, data).then(res => {
					//联网成功的回调,隐藏下拉刷新的状态
					this.showComment = true
					const result = res.result
					//设置列表数据
					if(this.mescroll.num == 1) {
						this.commentList = []; //如果是第一页需手动置空列表
					}
					this.commentList=this.commentList.concat(result.list);
					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					const hasNextPage = result.hasNextPage
					this.mescroll.endSuccess(result.size,hasNextPage);
					
					// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
					this.$nextTick(()=>{
						this.mescroll.endSuccess(result.size)
					})
					
				}).catch(error => {
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			},
			articleLike(){
				if(!this.accessToken||this.accessToken==''){
					uni.navigateTo({
						url: '/pages/system/login/login?goBackFlag='+'true'
					})
				}
				const data = {}
				data.articleId =this.articleId
				let likeApi = ''
				if(this.likeFlag){
					likeApi = api.articleDelLike
				}else{
					likeApi = api.articleLike
				}
				this.$http.post(likeApi, data).then(res => {
					this.likeFlag = !this.likeFlag
					let likeCount =this.likeCount
					if(this.likeFlag){
						likeCount = likeCount+1
					}else{
						if(likeCount>0){
							likeCount = likeCount-1
						}
					}
					this.likeCount=likeCount
				}).catch(error => {
					
				})
			},
			articleCollect(){
				if(!this.accessToken||this.accessToken==''){
					uni.navigateTo({
						url: '/pages/system/login/login?goBackFlag='+'true'
					})
				}
				const data = {}
				data.articleId =this.articleId
				let collectApi = ''
				if(this.collectFlag){
					collectApi = api.articleDelCollect
				}else{
					collectApi = api.articleCollect
				}
				this.$http.post(collectApi, data).then(res => {
					this.collectFlag = !this.collectFlag
					let collectCount =this.collectCount
					if(this.collectFlag){
						collectCount = collectCount+1
					}else{
						if(collectCount>0){
							collectCount = collectCount-1
						}
					}
					this.collectCount=collectCount
					
				}).catch(error => {
					
				})
				
			},
			gotoComment(){
				if(!this.accessToken||this.accessToken==''){
					uni.navigateTo({
						url: '/pages/system/login/login?goBackFlag='+'true'
					})
				}
				const data = {}
				data.articleId =this.articleId
				data.commentCount=this.info.commentCount
				this.$Router.push({ name:'comment', params:data})
			},
			gotoReport(){
				if(!this.accessToken||this.accessToken==''){
					uni.navigateTo({
						url: '/pages/system/login/login?goBackFlag='+'true'
					})
				}
				const data = {}
				data.articleId =this.articleId
				this.$Router.push({ name:'ariticleReport', params:data})
			},
			/*分享*/
			share() {
				// #ifdef H5
				if (util.isWechatOrQQ()) {
					this.showShareTip = true;
				} else {
					this.$refs.h5Share.open()
				}
				
				// #endif			
				// #ifdef MP
				uni.showShareMenu();
				// #endif
			},
			shareChange(e){
				let show  =e.show
			},
			shareSelect(){
				
			},
			reply(e){
				if(!this.replyFlag){
					this.replyFlag = true
					this.commentContent = ''
				}else{
					if(this.replyId!=e.commentId){
						this.commentContent = ''
					}
				}
				if(e.parentCommentId){
					this.parentCommentId = e.parentCommentId
				}else{
					this.parentCommentId = e.commentId
				}
				this.parentNikeName = e.nikeName?e.nikeName:'匿名'
				this.replyId = e.commentId
				this.openAddComment()
			},
			comment(){
				if (this.replyFlag) {
					this.commentContent = ''
					this.replyFlag = false
				}
				this.openAddComment()
			},
			/*初始化添加评论*/
			openAddComment() {
				if(!this.accessToken||this.accessToken==''){
					uni.navigateTo({
						url: '/pages/system/login/login?goBackFlag='+'true'
					})
				}
				this.$refs.addComment.open()
				setTimeout(() => {
					this.addCommentFocus = true;
				}, 200);
			},
			closeComment(){
				this.commentContent = ''
				console.log(this.replyFlag)
				if (this.replyFlag) {
					this.replyFlag = false
					this.parentNikeName = '匿名'
				}
				this.addCommentFocus = false
			},
			/*添加评论或回复*/
			addCommentOrReply() {
				if (!this.commentContent||this.commentContent == '') {
					this.$refs.uToast.show({
						title: '发表内容不能为空',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'warning', 
						position:'top',
						// 如果不需要图标，请设置为false
						icon: false
					})
					return;
				}
				this.addComment();
			},
			
			/*添加评论*/
			addComment() {
				const data={}
				data.articleId=this.articleId
				if(this.replyFlag){
					data.replyFlag='1'
				}else{
					data.replyFlag='0'
				}
				data.commentContent = this.commentContent
				data.parentCommentId = this.parentCommentId
				data.replyId = this.replyId
				this.$http.post(api.addComment, data).then(res => {
					this.$refs.addComment.close()
					this.closeComment()
					this.downCallback()
				}).catch(error => {
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
/* 简介 */
.introduce-section {
	display: flex;
	flex-direction: column;
	padding: 20rpx 30rpx;
	background: #fff;
	line-height: 1.5;

	.title {
		font-size: 36rpx;
		color: #303133;
		margin-bottom: 16rpx;
	}
	.introduce {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #909399;
		text {
			margin-right: 16rpx;
		}
	}
	.comment {
		padding: 20rpx 0 0 0;
		background: #fff;
		.title {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #303133;
			font-weight: bold;
			border-bottom: 1rpx solid #eee;
			text {
				padding-bottom: 20rpx;
				line-height: normal;
			}
			.count {
				padding-bottom: 20rpx;
				font-size: 28rpx;
				color: #909399;
				margin-left: 10rpx;
				line-height: normal;
			}
		}
	}
}
.add-comment {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 9999;
	.info {
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 20rpx 20rpx;
		.input {
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			align-items: center;
			background: #f2f2f2;
			border-radius: 40rpx 40rpx 0 40rpx;
			padding: 20rpx 32rpx 20rpx;
			line-height: normal;
			textarea {
				//padding: 10rpx 0;
				width: 100%;
				font-size: 28rpx;
				line-height: 42rpx;
				background: #f2f2f2;
			}
		}
		.add {
			flex-grow: 0;
			flex-shrink: 0;
			width: 150rpx;
			display: flex;
			align-items: center;
			margin-left: 10rpx;
		}
		.cancel {
			position: absolute;
			right: 10rpx;
			top: 2rpx;
			/deep/.icon {
				font-size: 40rpx;
				color: #ccc;
			}
		}
	}
}
.input-placeholder-class {
	color: $uni-text-color-placeholder;
	font-size: 28rpx;
}
</style>
